<!--
 * @Date: 2023-08-14 09:35:46
 * @LastEditors: 景冰川 961166897@qq.com
 * @LastEditTime: 2023-08-17 16:39:20
 * @FilePath: \veteran-cadre-app\src\components\mine\nav-list.vue
-->
<script setup lang="ts">
import qrcodeIcon from '~/static/images/mine/qr-code-icon.png'
import healthIcon from '~/static/images/mine/health-icon.png'
import mutualIcon from '~/static/images/mine/mutual-icon.png'
import assistanceIcon from '~/static/images/mine/assistance-icon.png'
import dietaryIcon from '~/static/images/mine/dietary-icon.png'
import { useAppStore } from '@/stores/app-store'

const appStore = useAppStore()
interface NavObjI {
  icon: string
  title: string
  path: string
}
interface Ipage {
  list: NavObjI[]
}

const popup = ref(null)

const page = reactive<Ipage>({
  list: [
    { icon: qrcodeIcon, title: '二维码', path: '' },
    { icon: healthIcon, title: '健康档案', path: '' },
    { icon: mutualIcon, title: '我的互助', path: '/pages-sub/user/my-help' },
    { icon: assistanceIcon, title: '助老服务', path: '/pages-sub/user/helpelder-service' },
    { icon: dietaryIcon, title: '饮食推荐', path: '' },
  ],
})
function onNav(e: NavObjI) {
  if (appStore.onClickDis() !== 3)
    return
  if (e.path)
    router.push(e.path)
  else
    popup.value.open()
}
</script>

<template>
  <div class="px-32rpx mx-32rpx mb-50rpx mt-47rpx bg-white rounded-16rpx shadow">
    <view
      v-for="(e, i) in page.list"
      :key="e.title"
      class="border-#EFEFEF border-b-solid flex h-112rpx justify-between items-center"
      :class="i === (page.list.length - 1) ? 'border-b-0' : 'border-b' "
      hover-class="bc-hover"
      @click="onNav(e)"
    >
      <div class="flex flex-1 justify-between items-center">
        <div class="flex items-center">
          <image
            :src="e.icon"
            class="block h-40rpx w-38rpx"
            mode="scaleToFill"
          />
          <div class="ml-20rpx text-33rpx font-400 text-#666">
            {{ e.title }}
          </div>
        </div>
        <uni-icons type="right" color="#999" size="18" />
      </div>
    </view>
  </div>

  <!-- ref="popup" @click.stop @on-open="popOpen" @on-close="popClose" -->
  <dev-load ref="popup" />
</template>
